<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <!-- 
        设置一个场景
        有一个动物园 看猴子看大象不要门票  看老虎看熊猫需要门票
    -->
    <div id="app">
        动物园
        <router-view></router-view>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        var isLogin = false  // 定义一个变量来记录用户是否登录
        const zoo = {
            template: `
                <div>
                    <ul>
                        <router-link tag="li" to="/monkey">猴子</router-link>
                        <router-link tag="li" to="/ele">大象</router-link>
                        <router-link tag="li" to="/tiger">老虎</router-link>
                        <router-link tag="li" to="/panda">熊猫</router-link>
                    </ul>
                    <router-view></router-view>
                </div>
            `
        }
        const monkey = {
            template: `<div>猴子区域</div>`,
            beforeRouteEnter (to, from, next) {
                // ...
            },

            beforeRouteUpdate() {

            },

            beforeRouteLeave (to, from, next) {
                // ...
            }
        }
        const ele = {
            template: `<div>大象区域</div>`
        }
        const tiger = {
            template: `<div>老虎区域</div>`
        }
        const panda = {
            template: `<div>熊猫区域</div>`
        }
        const login = {
            template: `
                <button @click="login">买票</button>
            `,
            methods: {
                login() {
                    alert('买票成功')
                    isLogin = true
                    this.$router.push({
                        name: this.$route.query.area
                    })
                }
            }
        }
        const router = new VueRouter({
            routes: [
                {
                    path: '/',
                    name: 'zoo',
                    component: zoo,
                    children: [
                        {
                            path: '/monkey',
                            name: 'monkey',
                            component: monkey,
                            beforeEnter(to, from, next) {
                                alert('我是独享守卫')
                                next()
                            },
                            meta: {
                                needLogin: false
                            }
                        },
                        {
                            path: '/ele',
                            name: 'ele',
                            component: ele,
                            meta: {
                                needLogin: false
                            }
                        },
                        {
                            path: '/tiger',
                            name: 'tiger',
                            component: tiger,
                            meta: {
                                needLogin: true
                            }
                        },
                        {
                            path: '/panda',
                            name: 'panda',
                            component: panda,
                            meta: {
                                needLogin: true
                            }
                        }
                    ]
                },
                {
                    path: '/login',
                    component: login
                }
            ]
        }) 
        // beforeEach 全局导航守卫中的全局前置守卫 意思在页面进入之前触发的逻辑
        router.beforeEach((to, from, next) => {
            // to and from are both route objects. must call `next`.
            // to是要进入的页面的路由对象 from是要离开的页面的路由对象
            // next下一步
            console.log(to);
            // 第一种写法
            // if(to.meta.needLogin) {
            //     if(isLogin) {
            //         next()
            //     } else {
            //         // next 可以进行页面跳转 跳转规则和正常vue路由跳转规则一样
            //         // alert('你还没买票呢, 你是麻瓜吗')
            //         next({
            //             path:'/login',
            //             query: {
            //                 area: to.name
            //             }
            //         })
            //     }
            // } else {
            //     next()
            // }
                // 官方写法
                // to.matched.some(item => {
                //     console.log(item);
                // });
            if(to.matched.some(item => item.meta.needLogin)) {
                if(isLogin) {
                    next()
                } else {
                    // next 可以进行页面跳转 跳转规则和正常vue路由跳转规则一样
                    // alert('你还没买票呢, 你是麻瓜吗')
                    next({
                        path:'/login',
                        query: {
                            area: to.name
                        }
                    })
                }
            } else {
                next()
            }
        })
        // router.beforeResolve() // 全局解析守卫
        // router.afterEach(to, from) // 全局后置守卫 只有to和from两个参数
        new Vue({
            el: '#app',
            router
        }) 
    </script>
</body>
</html>